<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://at.alicdn.com/t/c/font_3616992_1axz58wl1lh.css?spm=a313x.7781069.1998910419.76&file=font_3616992_1axz58wl1lh.css">
    <title>Document</title>
    <style>
        *{padding: 0;margin: 0;}
        ul,li{
            list-style: none;
        }
        header{
            width: 600px;
            margin: 30px auto;
        }
        .list{
            width: 600px;
            margin: 0 auto;
        }
        .list li{
            /* 弹性盒 */
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .list li span{
            /* margin-right没有固定值即最左边顶格，right-auto顶在最左边，再设置left
            margin-right: auto; 
            margin-left: 20px; */

            /*span占据剩下得所有空间；如果是input:flex:1,span:flex:2 button:flex:1 则span占所有得2/4空间  */
            /* 实现左边顶格 */
            flex: 1; 
            text-indent: 20px;
            /* text-indent是用来设定文本块中第一行的缩进。 */
        }
        .list i{
            color: red;
        }
    </style>
</head>
<body>
    <header>
        <input id="input" type="text">
        <button class="add">添加</button>
    </header>
    <ul class="list">
        <li>
            <input type="checkbox">
            <span>contentcontentcontentcontentcontentcontentcontent</span>
            <!-- <button>删除</button> -->
            <i class="iconfont icon-shanchu"></i>
        </li>
        <li>
            <input type="checkbox">
            <span>contentcontentcontentcontentcontentcontentcontent</span>
            <i class="iconfont icon-shanchu"></i>
        </li>
    </ul>
    <script>
        // 获取元素
        const addBtn = document.querySelector(".add");
        const input = document.querySelector("#input");
        const list = document.querySelector(".list");

        // 绑定事件(事件流：事件捕获、事件冒泡)
        // addEventListener第三个参数是是否开启事件捕获
        addBtn.addEventListener("click",function(){
            // 创建一个li元素
            const li = document.createElement("li");
            // 模板字符串
            li.innerHTML = `
                <input type="checkbox">
                <span>${input.value}</span>
                <i class="iconfont icon-shanchu"></i>
            `;
            list.appendChild(li);
        },false)
        // 箭头函数this问题
        // addBtn.addEventListener("click",()=>{
        //     console.log(this);
        // },false)

        // 删除功能

        // 事件委托(利用事件冒泡机制)--不绑给最终元素帮给祖先元素,这样新增加得也绑定上且不用绑定过多元素
        // list.addEventListener("click",function(){
        //     console.log(this);  //点击li里面得任何东西都会触发ul,事件冒泡,e不能这样删除点什么都删掉了
        // })
        list.addEventListener("click",function(e){
            console.log(e.target); //触发事件,鼠标点的谁就是谁
            if(e.target.nodeName == "I"){
                list.removeChild(e.target.parentNode);
            } 
        })  //因为是给ul绑定得所以新添加得元素也能绑定到删除.

        // const deleteBtns = document.querySelectorAll(".list i");
        // for(let i=0;i<deleteBtns.length;i++){
        //     deleteBtns[i].addEventListener("click",function(){
        //         list.removeChild(this.parentNode)//后添加得删除不了
        //     })
        // }


    </script>
</body>
</html>